<?xml version="1.0" encoding= "UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions">

<ui:composition template="/templates/common.xhtml">
	<ui:define name="content">
		<f:metadata>
			<f:viewParam name="id" value="#{eventBean.eventId}"></f:viewParam>
		</f:metadata>

		<p:panel header="Event: #{eventBean.currentEvent.eventTitle}">
			<p:panelGrid columns="2" style="width:95%;margin-left:10px">
				<h:outputText value="Start date: "
					rendered="#{not empty eventBean.currentEvent.eventStartDate}" />
				<h:outputText converter="javax.faces.DateTime"
					value="#{eventBean.currentEvent.eventStartDate}"
					rendered="#{not empty eventBean.currentEvent.eventStartDate}" />

				<h:outputText value="End date "
					rendered="#{not empty eventBean.currentEvent.eventEndDate}" />
				<h:outputText converter="javax.faces.DateTime"
					value="#{eventBean.currentEvent.eventEndDate}"
					rendered="#{not empty eventBean.currentEvent.eventEndDate}" />
				<h:outputText value="Description: "
					rendered="#{not empty eventBean.currentEvent.eventDescription}" />
				<h:outputText value=" #{eventBean.currentEvent.eventDescription}"
					rendered="#{not empty eventBean.currentEvent.eventDescription}" />
				<h:outputText value="Country: "
					rendered="#{not empty eventBean.currentEvent.eventCountry}" />
				<h:outputText
					value="#{eventBean.currentEvent.eventCountry.countryName}"
					rendered="#{not empty eventBean.currentEvent.eventCountry}" />
				<h:outputText value="City: "
					rendered="#{not empty eventBean.currentEvent.eventCity}" />
				<h:outputText value="#{eventBean.currentEvent.eventCity.cityName}"
					rendered="#{not empty eventBean.currentEvent.eventCity}" />
				<h:outputText value="Organizer: "
					rendered="#{not empty eventBean.currentEvent.organizer}" />
				<h:outputText
					value="#{eventBean.currentEvent.organizer.firstName} #{eventBean.currentEvent.organizer.lastName}"
					rendered="#{not empty eventBean.currentEvent.organizer}" />
			</p:panelGrid>

			<pre></pre>
				<p:commandButton id="eventadd" value="Become partcipant"
					rendered="#{!eventBean.member and not empty userBean.self}"
					style="margin-left: 20px" actionListener="#{eventBean.addMember}" update="participants" immediate="true" />

			<pre></pre>

			<p:carousel id="participants" value="#{eventBean.eventMembers}"
				headerText="Participants" var="participant"
				itemStyle="text-align:center" responsive="true"
				style="width:95%;margin-left:10px">
				
				<p:panelGrid columns="2" columnClasses="label,value" layout="grid"
					styleClass="ui-panelgrid-blank">


					<h:outputText value="Name:" />

					<h:link value="#{participant.firstName} #{participant.lastName}"
						outcome="/user/main">
						<f:param name="id" value="#{participant.userId}" />

					</h:link>
					<h:outputText value="Gender" />
					<h:outputText value="#{participant.gender}" />
					
				</p:panelGrid>

				<f:facet name="footer">
                In total there are #{fn:length(eventBean.eventMembers)} participants.
        </f:facet>
			</p:carousel>
			<pre></pre>
			<p:commandButton value="Back" action="/event/list"
				style="margin-left:20px" />
		</p:panel>

	</ui:define>

</ui:composition>


</html>
